<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('在线日志')" />
	<th:block th:include="include :: websocket-js" />
</head>
<body>
<button onclick="openSocket()">开启日志</button>
<button onclick="closeSocket()">关闭日志</button>
<button onclick="clearScreen()">清屏</button>
<div id="log-container" style="height: 530px; overflow-y: scroll; background: #333; color: #aaa; padding: 10px;">
    <div></div>
</div>
<script>
	
    var stompClient = null;
    $(document).ready(function() {openSocket();});
    function openSocket() {
        if(stompClient==null){
        	var ctx = '[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]';
            var socket = new SockJS(ctx+'/websocket?token=kl');
            stompClient = Stomp.over(socket);
            stompClient.connect({token:"kl"}, function(frame) {
                stompClient.subscribe('/topic/pullLogger', function(event) {
                    var content=JSON.parse(event.body);
                    $("#log-container div").append(content.timestamp +" "+ content.level+" --- ["+ content.threadName+"] "+ content.className+"   :"+content.body).append("<br/>").append(content.exception).append("<br/>");
                    $("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());
                },{
                    token:"kltoen"
                });
            });
        }
    }
    function closeSocket() {
        if (stompClient != null) {
            stompClient.disconnect();
            stompClient=null;
        }
    }
    
    function clearScreen(){
    	$("#log-container div").html("");
    }
</script>
</body>
</html>